<script lang="ts" setup>
import AssemblySize from './components/AssemblySize.vue'
import SearchMenu from './components/SearchMenu.vue'
import ThemeSetting from './components/ThemeSetting.vue'
import Fullscreen from './components/Fullscreen.vue'
import Avatar from './components/Avatar.vue'
import BaseNotice from '@/components/BaseNotice/index.vue'
import useUserStore from '@/store/user.ts'
import {ref} from 'vue'

const noticeList = ref([
	{
		id: 1,
		content: '初次搭建, 其中有问题欢迎大家交流与指正',
		value: '1'
	},
	{
		id: 2,
		content: '有好的想法或者不足之处可留言,看到会回复',
		value: '2'
	},
	{
		id: 3,
		content: '个人博客地址https://itzhi.github.io',
		value: '3'
	}
])
</script>

<template>
	<div class="tool-bar-ri">
		<base-notice v-if="noticeList?.length" :notice-list="noticeList"/>
		<div class="header-icon">
			<AssemblySize id="assemblySize"/>
			<SearchMenu id="searchMenu"/>
			<ThemeSetting id="themeSetting"/>
			<Fullscreen id="fullscreen"/>
		</div>
		<div class="username">{{ useUserStore().userName }}</div>
		<Avatar/>
	</div>
</template>

<style lang="scss" scoped>
.tool-bar-ri {
	display: flex;
	align-items: center;
	justify-content: center;
	//margin: 30px;

	.header-icon {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 120px;
		margin-right: 22px;
	}

	.username {
		margin: 0 20px 0 0;
		font-size: 15px;
	}
}
</style>
